import { Graph, Node, ObjectExt } from '@antv/x6';
import { SHAPE_TYPE } from 'src/app/shared/enum';

Graph.registerNode('wf-rect', {
  width: 160, // 默认宽度
  height: 40, // 默认高度
  attrs: {
    body: {
      refWidth: '100%',
      refHeight: '100%',
      fill: '#FFFBE6',
      strokeWidth: 1,
      stroke: '#333333',
    },
    image: {
      ref: 'body',
      refWidth: '30%',
      refHeight: '100%',
      x: 0,
      y: 0,
    },
    text: {
      ref: 'body',
      text: '使用 textWrap 实现文本换行',
      textWrap: {
        width: -50,
        ellipsis: true,
        breakWord: true
      },
      refX: '30%',
      refY: '50%',
      textAnchor: 'start',
      textVerticalAnchor: 'middle',
      fontSize: 14,
    },
  },
  markup: [
    {
      tagName: 'rect',
      selector: 'body',
    },
    {
      tagName: 'image',
      selector: 'image',
    },
    {
      tagName: 'text',
      selector: 'label',
    },
  ],
  ports: {
    groups: {
      out: {
        position: 'bottom',
        label: {
          position: 'bottom',
        },
        attrs: {
          circle: {
            magnet: true,
            connectionCount: 1, // 自定义属性，控制连接桩可连接多少条边
            r: 6,
            stroke: '#31d0c6',
            strokeWidth: 2,
            fill: '#fff',
          },
        },
      },
    },
  },
  // 通过钩子将自定义选项 label 应用到 'attrs/text/text' 属性上
  propHooks(metadata) {
    const { label, imageUrl, ...others } = metadata;
    if (label) {
      ObjectExt.setByPath(others, 'attrs/text/text', label);
    }
    if (imageUrl) {
      ObjectExt.setByPath(others, 'attrs/image/xlink:href', imageUrl);
    }
    return others;
  },
});

Graph.registerNode(SHAPE_TYPE.TEXT, {
  inherit: 'wf-rect',
  attrs: {
    image: {
      'xlink:href':
        '../../assets/image/text.svg',
    },
  },
  label: '标题+文本',
});

Graph.registerNode(SHAPE_TYPE.IMAGE, {
  inherit: 'wf-rect',
  attrs: {
    image: {
      'xlink:href':
        '../../assets/image/image.svg',
    }
  },
  label: '图片',
});
Graph.registerNode(SHAPE_TYPE.IMAGE_TEXT_V1, {
  inherit: 'wf-rect',
  attrs: {
    image: {
      'xlink:href':
        '../../assets/image/image-text.svg',
    }
  },
  label: '标题+图像+2个文本V1',
});
Graph.registerNode(SHAPE_TYPE.IMAGE_TEXT_V2, {
  inherit: 'wf-rect',
  attrs: {
    image: {
      'xlink:href':
        '../../assets/image/image-text-alternative.svg',
    }
  },
  label: '标题+图像+2个文本V2',
});

Graph.registerNode(SHAPE_TYPE.ERROR, {
  inherit: 'wf-rect',
  attrs: {
    image: {
      'xlink:href':
        '../../assets/image/error.svg',
    }
  },
  label: '错误',
});
Graph.registerNode(SHAPE_TYPE.WARNING, {
  inherit: 'wf-rect',
  attrs: {
    image: {
      'xlink:href':
        '../../assets/image/warning.svg',
    }
  },
  label: '警告',
});
Graph.registerNode(SHAPE_TYPE.QUESTION, {
  inherit: 'wf-rect',
  attrs: {
    image: {
      'xlink:href':
        '../../assets/image/question.svg',
    }
  },
  label: '问题',
});
Graph.registerNode(SHAPE_TYPE.INFO, {
  inherit: 'wf-rect',
  attrs: {
    image: {
      'xlink:href':
        '../../assets/image/info.svg',
    }
  },
  label: '信息',
});
Graph.registerNode(SHAPE_TYPE.SUCCESS, {
  inherit: 'wf-rect',
  attrs: {
    image: {
      'xlink:href':
        '../../assets/image/success.svg',
    }
  },
  label: '成功',
});
Graph.registerNode(SHAPE_TYPE.IMAGE_TASK, {
  inherit: 'wf-rect',
  attrs: {
    image: {
      'xlink:href':
        '../../assets/image/image-task.svg',
    }
  },
  label: '标题+图像+文本',
});
Graph.registerNode(SHAPE_TYPE.MEDIA_VIEW, {
  inherit: 'wf-rect',
  attrs: {
    image: {
      'xlink:href':
        '../../assets/image/media-view.svg',
    }
  },
  label: '媒体/视频UI',
});
Graph.registerNode(SHAPE_TYPE.MEDIA_VIEW_NO_CONTROL, {
  inherit: 'wf-rect',
  attrs: {
    image: {
      'xlink:href':
        '../../assets/image/media-view-nocontrol.svg',
    }
  },
  label: '播放视频无控制',
});
Graph.registerNode(SHAPE_TYPE.MEDIA_TEXT, {
  inherit: 'wf-rect',
  attrs: {
    image: {
      'xlink:href':
        '../../assets/image/media-text.svg',
    }
  },
  label: '标题+媒体/视频',
});
Graph.registerNode(SHAPE_TYPE.MEDIA_TEXT_NO_CONTROL, {
  inherit: 'wf-rect',
  attrs: {
    image: {
      'xlink:href':
        '../../assets/image/media-text-nocontrol.svg',
    }
  },
  label: '标题+播放视频无控制',
});
Graph.registerNode(SHAPE_TYPE.SCREEN, {
  inherit: 'wf-rect',
  attrs: {
    image: {
      'xlink:href':
        '../../assets/image/screen.svg',
    }
  },
  label: '图像',
});
Graph.registerNode(SHAPE_TYPE.RECORD, {
  inherit: 'wf-rect',
  attrs: {
    image: {
      'xlink:href':
        '../../assets/image/record.svg',
    }
  },
  label: '记录',
});
Graph.registerNode(SHAPE_TYPE.SCAN, {
  inherit: 'wf-rect',
  attrs: {
    image: {
      'xlink:href':
        '../../assets/image/scan.svg',
    }
  },
  label: '扫描',
});
